<template>
	<view>
		<view class="tab_box">
			<u-tabs activeColor='#F54A0A' fontColor="#000" barWidth="80" inactiveColor='#505050' fontSize="30"
				:list="cate" :bold="false" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>

		<view style="height: 115rpx;"></view>

		<view>

			<view class="li_info l_bm" v-for="(item,index) in list" :key="index">
				<view v-if="item.state!=2" class="msg_box">{{item.state_text}}</view>
				<view class="fc">
					<image class="avatar" :src="item.avatar"></image>
					<view>
						<view class="nickname" v-if="item.users">{{item.users.nickname}}</view>
						<view class="time">{{item.createtime}}</view>
					</view>
					<view @click="$project.toPhone(item.mobile)" class="fc phone_box" v-if="item.mobile&&item.state==2">
						<u-icon name="phone-fill" color="white" size="24"></u-icon>
						<view class="phone_name">电话</view>
					</view>
				</view>
				<view class="name">
					{{item.name}}
				</view>

				<view class="fcw">
					<view :class="[item.images.length>1?'img_box':'']" @click="setImgVideo(items)"
						v-for="(items,indexs) in item.images" :key="indexs">
						<image class="i_img" v-if="items.type==1&&item.images.length>1" :src="items.url"></image>
						<image :style="'width:'+items.width+'px'" mode="widthFix"
							v-if="items.type==1&&item.images.length==1" :src="items.url"></image>
						<video class="i_img" :src="items.url"
							v-if="items.type==2&&item.images.length>1&&items.url"></video>
						<view class="v_box" :style="'width:'+items.width+'px;'+'height:'+items.height+'px;'"
							v-if="items.type==2&&item.images.length==1">
							<view class="play_img_box">
								<image class="play_img" :src="play_img" mode="widthFix"></image>
							</view>

							<video :show-center-play-btn="false" object-fit="cover" :controls="false" v-if="items.url"
								class="ii_video" :src="items.url"></video>
						</view>
						<!-- <view class="i_img i_video" v-if="items.type==2">
								<u-icon name="play-right-fill" color="white" size="50"></u-icon>
							</view> -->
					</view>
				</view>

				<view class="make_box" v-if="item.state==2">
					<button open-type="share">
						<view class="fc minfo">

							<view>分享</view>
							<u-icon color="#616161" class="minfo" name="zhuanfa" size="34"></u-icon>

						</view>
					</button>
					<view class="fc minfo">
						<view class="minfo">评论</view>
						<u-icon color="#616161" class="minfo" name="chat" size="34"></u-icon>
						<text>({{item.pnum}})</text>
					</view>
					<view class="fc minfo" @click="isDz(item)">
						<view>点赞</view>
						<u-icon color="#616161" class="minfo" v-if="item.dz<1" name="thumb-up " size="34"></u-icon>
						<u-icon class="minfo" v-else color="#FC742A" name="thumb-up-fill" size="28"></u-icon>
					</view>
				</view>
			</view>

		</view>

		<view class="bitmap" v-if="list.length<1">
			<image :src="none" mode="aspectFit"></image>
			<view class="gray_font fs-13">
				亲，暂无数据哦!
			</view>
		</view>

		<view style="height: 20rpx;"></view>

		<view class="bottom_box" @click="setPshow">+</view>


		<u-popup v-model="pshow" mode="bottom">

			<view class="pbox">

				<div class="fcs">
					<view @click="toUrl(item)" class="icon_box" v-for="(item,index) in icon" :key="index">
						<image class="icon" mode="widthFix" :src="item.image"></image>
						<view>{{item.title}}</view>
					</view>
				</div>

				<view class="close_box" @click="pshow=false">
					<u-icon name="close" color="#959595"></u-icon>
				</view>

			</view>
		</u-popup>


		<view class="preview-full" v-if="previewVideoSrc!=''">
			<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
				<cover-view class="preview-full-close" @click="previewVideoSrc=''"> ×
				</cover-view>
			</video>
		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				cate: [{
						id: 1,
						name: '邻里秀'
					},
					{
						id: 2,
						name: '二手'
					},
					{
						id: 3,
						name: '房屋租售'
					}
				],
				icon: [],
				pshow: false,
				list: [],
				total: 0,
				params: {
					page: 1,
					my: 1
				},
				show: false,
				previewVideoSrc: '',
				none: '',
				user: {},
				play_img: ''
			}
		},
		methods: {
			onShow() {
				this.pshow = false;
				//	this.getList();
				this.getUserInfo();
			},
			onLoad(e) {
				this.none = this.$imgUrl + 'assets/img/none_order.png';
				this.play_img = this.$imgUrl + 'assets/img/play.png';
				this.getHomeCate();
			},
			getUserInfo() {
				let token = uni.getStorageSync('userToken');
				if (!token) return;

				this.$get(this.$api.userInfo, {
					token: token
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						this.user = data.data;
					}
				});
			},
			setPshow() {
				let _ = this;
				this.$needLogin(() => {
					//_.$project.common(_.user,3);
					//if(_.user.audit_status!=2) return;
					_.pshow = true
				}, 2, '/pages/tabar/qz');
			},
			isDz(e) {
				let _ = this;
				this.$needLogin(() => {
					//_.$project.common(_.user,3);
					//if(_.user.audit_status!=2) return;
					_.setDz(e);
				}, 2, '/pages/tabar/qz');
			},
			setDz(e) {
				let type = 1;
				let path = this.cate[this.current].url;

				if (path == '/pages/qz/liAdd') type = 1;
				if (path == '/pages/qz/ldAdd') type = 2;
				if (path == '/pages/qz/rAdd') type = 3;
				if (path == '/pages/qz/jAdd') type = 4;

				this.$post(this.$api.qzDz, {
					type: type,
					id: e.id
				}, res => {
					let data = res.data;
					if (data.code == 1) {
						e.dz = data.data.status;
						this.$Toast(data.msg);
					}
				});
			},
			setImgVideo(e) {
				if (e.type == 1) {
					uni.previewImage({
						urls: [e.url]
					});
				} else {
					this.previewVideoSrc = e.url;
				}
			},
			setShow() {
				if (this.total < 1) {
					this.show = true;
				} else {
					this.show = false;
				}
			},
			getList() {
				this.params.page = 1;
				this.params.token = uni.getStorageSync('userToken');
				let url = '';
				let path = this.cate[this.current].url;
				
				console.log(this.cate[this.current]);

				if (path == '/pages/qz/liAdd') url = this.$api.qzLists;
				if (path == '/pages/qz/ldAdd') url = this.$api.IdLists;
				if (path == '/pages/qz/rAdd') url = this.$api.qzrLists;
				if (path == '/pages/qz/jAdd') url = this.$api.qzJlist;

				this.$get(url, this.params, (res) => {
					let {
						code,
						data
					} = res.data;
					if (code == 1) {
						this.list = data.data;
						this.total = data.total;
						this.setShow();
					}
				})
			},

			toUrl(e) {
				if (e.type == 1) {
					this.$project.toPath(e.url);
				} else {
					this.$project.toPaths(e.url);
				}
			},
			getHomeCate() {
				this.$get(this.$api.qzHome, {}, res => {
					let e = res.data;
					if (e.code == 1) {
						this.icon = e.data;
						this.cate = e.data;

						this.getList();
					}
				});
			},
			change(e) {
				console.log(e);
				this.current = e;
				this.getList();
			},
			previewImage(e, key) {
				uni.previewImage({
					urls: e,
					current: key
				});
			},
			check(e) {
				this.params.status = e;
				//this.getList();
			},

		},

		onShareAppMessage() {
			return {
				path: '/pages/tabar/qz'
			}
		},
		onReachBottom() {
			if (this.total <= this.list.length) return;
			this.params.page++;
			this.params.token = uni.getStorageSync('userToken');

			let url = '';
			let path = this.cate[this.current].url;

			if (path == '/pages/qz/liAdd') url = this.$api.qzLists;
			if (path == '/pages/qz/ldAdd') url = this.$api.IdLists;
			if (path == '/pages/qz/rAdd') url = this.$api.qzrLists;
			if (path == '/pages/qz/jAdd') url = this.$api.qzJlist;

			this.$get(url, this.params, res => {
				let data = res.data;
				if (data.code == 1) {
					this.list = this.list.concat(data.data.data);
					this.total = data.data.total;
				}
			});
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-tab-item {
		background-color: transparent !important;
		font-size: 30rpx !important;
	}



	.tab_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		border-top: 1rpx solid #F0F0F0;
		box-sizing: border-box;
		padding: 0 0 15rpx 0;
		background-color: white;
		z-index: 100;
	}

	.bitmap {
		text-align: center;
		padding-top: 100rpx;
	}

	.bitmap image {
		width: 60%;
	}

	.bitmap view {
		color: gray;
		font-size: 26rpx;
		margin-top: 30rpx;
	}


	.bottom_box {
		position: fixed;
		bottom: 60rpx;
		right: 25rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #FC742A;
		color: white;
		border-radius: 50%;
		text-align: center;
		font-size: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pbox {
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		padding: 50rpx 100rpx;

	}

	.fc {
		display: flex;
		align-items: center;
	}

	.fcw {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.fcs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.icon {
		width: 80rpx;
	}

	.icon_box {
		text-align: center;
	}

	.close_box {
		box-sizing: border-box;
		padding: 50rpx 0 0 0;
		text-align: center;
	}

	.li_info {
		background-color: white;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.l_bm {
		border-bottom: 1rpx solid #E7E7E7;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin-right: 15rpx;
	}

	.nickname {
		color: #616D90;
		font-size: 32rpx;
	}

	.time {
		font-size: 26rpx;
		color: #929091;
	}

	.name {
		box-sizing: border-box;
		padding: 30rpx 0 10rpx 0;
		color: black;
		font-size: 32rpx;
	}

	.img_box {
		width: 32.5%;
		height: 220rpx;
		margin-right: 0.83%;
		margin-top: 20rpx;
	}

	.i_img {
		width: 100%;
		height: 100%;
	}

	.i_video {
		background-color: black;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.make_box {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		box-sizing: border-box;
		padding: 30rpx 0 0 0;
		font-size:32rpx;
	}

	.minfo {
		margin-left: 15rpx;
	}

	.preview-full {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
	}

	.preview-full video {
		width: 100%;
		height: 100%;
		z-index: 1002;
	}

	.preview-full-close {
		position: fixed;
		left: 32rpx;
		top: 25rpx;
		width: 80rpx;
		height: 80rpx;
		line-height: 60rpx;
		text-align: center;
		z-index: 1003;

		color: #fff;
		font-size: 65rpx;
		font-weight: bold;

	}

	.bitmap {
		margin-top: 10vh;
		text-align: center;
	}

	button {
		margin: 0;
		padding: 0;
		background-color: #fff;
		line-height: inherit;
		border-radius: 0;
		border: none;
		font-size:32rpx;
	}

	.v_box {
		width: 100%;
		height: 100%;
	}

	.ii_video {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}


	.phone_box {
		margin-left: auto;
		background-color: #4A84F6;
		color: white;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 8rpx 15rpx;
		border-radius: 10rpx;
	}

	.phone_name {
		margin-left: 10rpx;
	}

	.msg_box {
		text-align: right;
		color: #FC742A;
	}

	.v_box {
		position: relative;
	}

	.play_img {
		width: 100rpx;
	}

	.play_img_box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>